<template>
    <div class="container">
        <div class="equiment-btn">
            <el-button type="primary" size="small" @click="showDialog(1)">控制参数</el-button>
            <el-button type="primary" size="small" @click="showDialog(2)">远程开关</el-button>
            <el-button type="primary" size="small" @click="showDialog(3)">历史数据导出</el-button>
            <!--<el-button type="primary" size="small" @click="showDialog(4)">基本信息修改</el-button>-->
            <el-button type="primary" size="small" @click="showDialog(5)">故障历史记录</el-button>
            <el-checkbox v-model="checked" @change="checkedTimeingData" style="margin-left: 30px;">实时数据</el-checkbox>

        </div>
        <div class="equiment-base">
            <span>设备名称：{{deviceData.deviceName}}</span>
            <span>IMEI：{{deviceData.deviceCode}}</span>
        </div>
        <div>输出状态：</div>
        <div class="equiment-base">
            <div style="padding-left: 30px;" v-if="deviceParam.deviceState">
                <div v-for="(item,index) in deviceParam.functions" :key="item.functionId">
                    <span v-if="!verifications(deviceParam.deviceState[item.functionCode])">{{item.functionName}}：{{formatStauts(deviceParam.deviceState[item.functionCode])}}</span>
                </div>
            </div>
        </div>
        <div>传感参数：</div>
        <div class="equiment-base" v-if="deviceParam.deviceState" style="padding-left: 30px;">
            <div v-for="(item,index) in deviceTypeList.deviceTypeDataList" :key="item.dataId">
                <span v-if="!verifications(deviceParam.deviceState[item.dataUnit])">{{item.dataName}}：{{deviceParam.deviceState[item.dataUnit]}} {{item.dataSymbol}}</span>
            </div>
        </div>
        <div style="overflow:hidden;">
            <el-row :gutter="20" v-if="deviceParam.charts&&deviceParam.charts.length>0">
                <el-col :span="6" v-for="(item,index) in deviceParam.charts" :key="index">
                    <div class="chart-container">
                        <chart height="100%" width="100%" :id="'wendu' + index" :data="item"/>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 故障 -->
        <el-dialog title="故障历史记录" :visible.sync="dialogErrVisible" width="50%">
            <span>请选择时间范围：</span>
            <el-date-picker v-model="errTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
                            size="small">
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogErrVisible = false">取 消</el-button>
                <el-button type="primary" @click="searchErrList">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="故障历史记录" :visible.sync="dialogErrListVisible" width="50%">
            <el-table :data="errData" stripe>
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="createTime" label="时间" width="200" :formatter="formatTime"></el-table-column>
                <el-table-column property="message" label="类型"></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 历史数据导出 -->
        <el-dialog title="历史数据导出" :visible.sync="dialogHisVisible" width="50%">
            <span>请选择时间范围：</span>
            <el-date-picker v-model="histTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
                            size="small">
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogHisVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitHisTime">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 基本信息修改 -->
        <!--<el-dialog title="基本信息修改" :visible.sync="dialogBaseVisible" width="30%">-->
            <!--<el-form :model="form">-->
                <!--<el-form-item label="水箱容量：" label-width="120px">-->
                    <!--<el-input v-model="form.vl" type="number" size="small"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="水箱功率：" label-width="120px">-->
                    <!--<el-input v-model="form.pw" type="number" size="small"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="水箱截面积：" label-width="120px">-->
                    <!--<el-input v-model="form.jm" type="number" size="small"></el-input>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="dialogBaseVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="submitBaseInfo">确 定</el-button>-->
      <!--</span>-->
        <!--</el-dialog>-->
        <!-- 远程开关 -->
        <el-dialog title="远程开关" :visible.sync="dialogDistanceVisible" width="80%">
            <el-form :model="paramCtrolData" label-position="top" class="ctrl-param" v-if="paramCtrolData">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="系统运行模式：">
                            <template v-slot:label>
                                <span>系统运行模式：</span>
                                <!--<el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[0])">设置</el-button>-->
                            </template>
                            <el-form :inline="true" :model="paramCtrolData" class="demo-form-inline">
                                <el-form-item label="系统运行模式：">
                                    <template v-slot:label>
                                        <span>系统运行模式：</span>
                                        <el-radio-group v-model="paramCtrolData.SysMode" @change="changeRadio($event,paramsGroup[0])">
                                            <el-radio label="0">自动</el-radio>
                                            <el-radio label="1" :disabled="paramCtrolData.Delay<=0" title="时间需大于0">手动</el-radio>
                                            <!--<el-radio label="2">常关</el-radio>-->
                                        </el-radio-group>
                                    </template>
                                </el-form-item>
                                <el-form-item label="延时恢复自动时间(分)：">
                                    <el-input v-model="paramCtrolData.Delay" type="number" size="small" @input="inputTimeLimit"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!--<div>-->
                <!--<el-button v-for="(item,index) in deviceParam.functions" :key="item.functionId" type="primary"-->
                           <!--class="button-style" size="small" @click="clickBtn(item,index)">{{item.functionName}}-->
                <!--</el-button>-->
            <!--</div>-->
            <div v-if="paramCtrolData">
                <div v-for="(item,index) in deviceParam.functions" :key="item.functionId">
                    <span class="params-span">{{item.functionName}}</span>
                    <span class="params-span">状态：{{formatStauts(deviceParam.deviceState[item.functionCode])}}</span>
                    <el-button v-for="(item1,index1) in deviceTypeList.deviceStatusList" :key="item1.statusId" type="primary" :disabled="paramCtrolData.SysMode!=1"
                               class="button-style" size="mini" @click="clickBtn(item1,item)">{{item1.statusName}}
                    </el-button>
                </div>
            </div>
            <!--<el-checkbox-group v-model="checkList">-->
                <!--<el-checkbox label="进水开关" style="margin-bottom: 15px;" :disabled="formatCheckDis()"></el-checkbox>-->
                <!--<br/>-->
                <!--<el-checkbox label="出水开关" style="margin-bottom: 15px;" :disabled="formatCheckDis()"></el-checkbox>-->
                <!--<br/>-->
                <!--<el-checkbox label="烟雾报警" style="margin-bottom: 15px;" :disabled="formatCheckDis()"></el-checkbox>-->
                <!--<br/>-->
                <!--<el-checkbox label="空气能主机" style="margin-bottom: 15px;" :disabled="formatCheckDis()"></el-checkbox>-->
                <!--<br/>-->
                <!--<el-checkbox label="自动" style="margin-bottom: 15px;"></el-checkbox>-->
            <!--</el-checkbox-group>-->
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDistanceVisible = false">取 消</el-button>
        <!--<el-button type="primary" @click="submitDistance">修 改</el-button>-->
      </span>
        </el-dialog>
        <!-- 控制参数 -->
        <el-dialog title="控制参数" :visible.sync="dialogParamVisible" width="80%" :close-on-click-modal="false" :close-on-press-escape="false">
            <template v-slot:title>
                <span class="params-label">控制参数：
                    <!--(<small style="color: #ff0000;">每次只可修改一组数据</small>)-->
                </span>
                <el-button type="primary" size="mini" class="btn-set" @click="readParam">读取参数</el-button>
                <div style="float: right;padding-right: 50px;">
                    <small v-if="deviceTime">{{deviceTime}}</small>
                    <el-button type="success" size="mini" class="btn-set" @click="readDeviceTime">读取时钟</el-button>
                    <el-button type="success" size="mini" class="btn-set" @click="setDeviceTime">同步时钟</el-button>
                </div>
            </template>
            <el-form :model="paramCtrolData" label-position="top" class="ctrl-param" v-if="paramCtrolData">
                <!--<el-row :gutter="10">-->
                    <!--<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">-->
                        <!--<el-form-item label="星期：">-->
                            <!--<el-select v-model="paramCtrolData.WorkDay" multiple placeholder="请选择星期" size="small"-->
                                       <!--class="item-one">-->
                                <!--<el-option v-for="item in weekList" :label="item.label" :value="item.value"-->
                                           <!--:key="item.value">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                <!--</el-row>-->
                <el-row :gutter="10" v-if="false">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="系统运行模式：">
                            <template v-slot:label>

                                <span class="params-label">系统运行模式：</span>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.Sys_ConfigParam">-->
                                    <!---->
                                <!--</el-checkbox>-->
                                <!--<el-select v-model="paramCtrolData.Sys_ConfigParam" size="mini" placeholder="请选择">-->
                                    <!--<el-option-->
                                            <!--v-for="item in enableList"-->
                                            <!--:key="item.value"-->
                                            <!--:label="item.label"-->
                                            <!--:value="item.value">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[0])">设置</el-button>
                            </template>
                            <el-form :inline="true" :model="paramCtrolData" class="demo-form-inline">
                                <el-form-item label="系统运行模式：">
                                    <template v-slot:label>
                                        <span>系统运行模式：</span>
                                        <el-radio-group v-model="paramCtrolData.SysMode">
                                            <el-radio label="0">自动</el-radio>
                                            <el-radio label="1">手动</el-radio>
                                            <!--<el-radio label="2">常关</el-radio>-->
                                        </el-radio-group>
                                    </template>
                                </el-form-item>
                                <el-form-item label="延时恢复自动时间：">
                                    <el-input v-model="paramCtrolData.Delay" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="空气能主机电源运行时间：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.Run_TimeParam">-->
                                    <!--空气能主机电源运行时间：-->
                                <!--</el-checkbox>-->
                                <span class="params-label">系统运行时间：</span>
                                <el-select v-model="paramCtrolData.Run_TimeParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[1],1)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="运行开始时间：">
                                    <el-time-picker v-model="paramCtrolData.Run_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="运行结束时间：">
                                    <el-time-picker v-model="paramCtrolData.Run_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="进水时间控制：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.IN_TimeParam">-->
                                    <!--进水时间控制：-->
                                <!--</el-checkbox>-->
                                <span class="params-label">进水时间控制：</span>
                                <el-select v-model="paramCtrolData.IN_TimeParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[2],2)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="进水开始时间：">
                                    <el-time-picker v-model="paramCtrolData.IN_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="液位转换时间：">
                                    <el-time-picker v-model="paramCtrolData.IN_Convert" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="进水结束时间：">
                                    <el-time-picker v-model="paramCtrolData.IN_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="出水时间控制：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.OUT_TimeParam">-->
                                    <!--出水时间控制：-->
                                <!--</el-checkbox>-->
                                <span class="params-label">出水时间控制：</span>
                                <el-select v-model="paramCtrolData.OUT_TimeParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[3],3)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="时间段1开始时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT1_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段1结束时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT1_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段2开始时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT2_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段2结束时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT2_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段3开始时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT3_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段3结束时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT3_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段4开始时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT4_Start" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                                <el-form-item label="时间段4结束时间：">
                                    <el-time-picker v-model="paramCtrolData.OUT4_End" placeholder="任意时间点"
                                                    size="small"></el-time-picker>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="水箱温度控制主机参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.Host_TempParam">-->
                                    <!--水箱温度控制主机参数：-->
                                <!--</el-checkbox>-->
                                <span class="params-label">水箱温度控制主机参数：</span>
                                <el-select v-model="paramCtrolData.Host_TempParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[4],4)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="水箱高温设定(℃)：">
                                    <el-input v-model="paramCtrolData.Host_TempH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="水箱低温设定(℃)：">
                                    <el-input v-model="paramCtrolData.Host_TempL" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="水箱温度控制补水参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.ReIN_TempParam">-->
                                    <!--水箱温度控制进水参数：-->
                                <!--</el-checkbox>-->
                                <span class="params-label">水箱温度控制补水参数：</span>
                                <el-select v-model="paramCtrolData.ReIN_TempParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[5],5)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="补水高温设定(℃)：">
                                    <el-input v-model="paramCtrolData.ReIN_TempH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="补水低温设定(℃)：">
                                    <el-input v-model="paramCtrolData.ReIN_TempL" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="水箱温度控制回水参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.Back_TempParam">水箱温度控制回水参数：</el-checkbox>-->
                                <span class="params-label">水箱温度控制回水参数：</span>
                                <el-select v-model="paramCtrolData.Back_TempParam" size="mini" placeholder="请选择">
                                    <el-option
                                            v-for="item in enableList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[6],6)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="回水高温设定(℃)：">
                                    <el-input v-model="paramCtrolData.Back_TempH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="回水低温设定(℃)：">
                                    <el-input v-model="paramCtrolData.Back_TempL" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="太阳能循环泵控制参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.Solar_ConfigParam">太阳能循环泵控制参数：</el-checkbox>-->
                                <span class="params-label">太阳能循环泵控制参数：</span>
                                <!--<el-select v-model="paramCtrolData.Solar_ConfigParam" size="mini" placeholder="请选择">-->
                                    <!--<el-option-->
                                            <!--v-for="item in enableList"-->
                                            <!--:key="item.value"-->
                                            <!--:label="item.label"-->
                                            <!--:value="item.value">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[7],7)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="太阳能循环泵控制参数：">
                                    <el-radio-group v-model="paramCtrolData.Solar_DiffParam">
                                        <el-radio label="0">自动</el-radio>
                                        <el-radio label="1">常开</el-radio>
                                        <el-radio label="2">常关</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="太阳能温差上限(℃)：">
                                    <el-input v-model="paramCtrolData.Solar_DiffH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="太阳能温差下限(℃)：">
                                    <el-input v-model="paramCtrolData.Solar_DiffL" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="液位量程：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.WaterLevel_ConfigParam">液位量程：</el-checkbox>-->
                                <span class="params-label">液位量程：</span>
                                <!--<el-select v-model="paramCtrolData.WaterLevel_ConfigParam" size="mini" placeholder="请选择">-->
                                    <!--<el-option-->
                                            <!--v-for="item in enableList"-->
                                            <!--:key="item.value"-->
                                            <!--:label="item.label"-->
                                            <!--:value="item.value">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[8],8)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="液位量程最大值(CM)：">
                                    <el-input v-model="paramCtrolData.WaterLevel_Max" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="液位量程最小值(CM)：">
                                    <el-input v-model="paramCtrolData.WaterLevel_Min" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="液位控制进水参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.TimeWater_ConfigParam">液位控制进水参数：</el-checkbox>-->
                                <span class="params-label">液位控制进水参数：</span>
                                <!--<el-select v-model="paramCtrolData.TimeWater_ConfigParam" size="mini" placeholder="请选择">-->
                                    <!--<el-option-->
                                            <!--v-for="item in enableList"-->
                                            <!--:key="item.value"-->
                                            <!--:label="item.label"-->
                                            <!--:value="item.value">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                                <el-button type="primary" size="mini" class="btn-set" @click="clickSettingBtn(paramsGroup[9],9)">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="进水时段1液位高值(CM)：">
                                    <el-input v-model="paramCtrolData.Time1_WaterH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="进水时段1液位低值(CM)：">
                                    <el-input v-model="paramCtrolData.Time1_WaterL" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="进水时段2液位高值(CM)：">
                                    <el-input v-model="paramCtrolData.Time2_WaterH" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="进水时段2液位低值(CM)：">
                                    <el-input v-model="paramCtrolData.Time2_WaterL" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="液位安全设定值(CM)：">
                                    <el-input v-model="paramCtrolData.WaterLevel_Alarm" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="通道控制参数：">
                            <template v-slot:label>
                                <!--<el-checkbox true-label='1' false-label='0' v-model="paramCtrolData.TimeWater_ConfigParam">液位控制进水参数：</el-checkbox>-->
                                <span class="params-label">通道控制参数：</span>
                                <!--<el-select v-model="paramCtrolData.TimeWater_ConfigParam" size="mini" placeholder="请选择">-->
                                <!--<el-option-->
                                <!--v-for="item in enableList"-->
                                <!--:key="item.value"-->
                                <!--:label="item.label"-->
                                <!--:value="item.value">-->
                                <!--</el-option>-->
                                <!--</el-select>-->
                                <el-button type="primary" size="mini" class="btn-set" @click="setChannelData">设置</el-button>

                            </template>
                            <el-form :inline="true" :model="paramCtrolData" label-position="top" class="demo-form-inline">
                                <el-form-item label="主水箱夜位通道号：">
                                    <el-input v-model="chanalConfig.ch_Water1" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="副水箱位通道号：">
                                    <el-input v-model="chanalConfig.ch_Water2" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="主水箱温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp3" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="副水箱温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp2" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="供水管温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp3" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="回水管温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp4" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="主机一温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp5" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="主机二温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp6" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="太阳能1温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp7" type="text" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="太阳能2温度通道号：">
                                    <el-input v-model="chanalConfig.ch_Temp8" type="text" size="small"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogParamVisible = false">取 消</el-button>
                <!--<el-button type="primary" @click="submitCtrlParam">修 改</el-button>-->
            </span>
        </el-dialog>
        <!--导出表格时使用的隐藏table-->
        <div style="height:0;overflow:hidden;">
            <el-table :data="gridData" stripe id="exportTab">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="createTime" label="时间" width="200" :formatter="formatTime"></el-table-column>
                <el-table-column property="dataName" label="数据项" :formatter="histHeader"></el-table-column>
                <el-table-column property="deviceCode" label="IMEI"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import Chart from '@/components/Charts/MixChart'
    import {exportTable} from '../../../exporttable/index'
    import {queryDeviceRunningData, queryDeviceConfigParams,queryDeviceHistoryData,
        queryDeviceWarningData,setDeviceConfigParams,manualControll,
        getDeviceTypeInfo,readDeviceTime,setDeviceTime,readRealData,getSysConfigData,readChannelData,setChannelData} from '../../../api/index';
    import {verification,famatDatesTimes} from '../../common/com';
    import {apiLoading} from '../../../config/index' //全局的页面跳转loading是否启用
    export default {
        name: "equimentparam",
        components: {Chart},
        data() {
            return {
                deviceParam: {},
                deviceData: {},
                paramCtrolData: null,
                paramCtrolDataStr:null,
                dialogErrVisible: false,
                dialogHisVisible: false,
                dialogBaseVisible: false,
                dialogDistanceVisible: false,
                dialogParamVisible: false,
                dialogErrListVisible:false,
                gridData: [],
                errData: [],
                checkList: [],
                weekList: [{label: '星期一', value: '1'}, {label: '星期二', value: '2'},
                    {label: '星期三', value: '3'}, {label: '星期四', value: '4'},
                    {label: '星期五', value: '5'}, {label: '星期六', value: '6'},{label: '星期日', value: '7'}
                ],
                paramSetTimer: null,
                histTime:'',
                errTime:'',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    onPick:(obj)=>{
                        if(obj.minDate && obj.maxDate){
                            if(obj.maxDate.getTime() - obj.minDate.getTime() > 30*24*60*60*1000){
                                this.$message.error('时间范围智能是30天内的')
                            }
                        }
                    }
                },
                checkedList:[],
                enableList: [{
                    value: '0',
                    label: '禁用'
                },
                    {
                        value: '1',
                        label: '启用'
                    }
                ],
                paramsGroup:[
                        ['SysMode','Delay','Sys_ConfigParam'],['Run'],['IN'],['OUT'],['Host'],['ReIN'],['Back'],['Solar'],
                        ['WaterLevel_Max','WaterLevel_Min','WaterLevel_ConfigParam'],['Time','WaterLevel_Alarm']
                ],
                deviceTypeList:[],
                flag:0,// 0读数据库 1读取硬件
                deviceTime:'',
                timerLength: 1000*60*40,//40分钟
                checked:false,
                timerStartTime:0,
                timerConfig:{
                    autoRefreshFre:40,
                    realRefreshFre:2,
                    realRefreshRunTime:5
                },
                chanalConfig:{
                    "ch_Temp1":0,
                    "ch_Temp2":0,
                    "ch_Temp3":0,
                    "ch_Temp4":0,
                    "ch_Temp5":0,
                    "ch_Temp6":0,
                    "ch_Temp7":0,
                    "ch_Temp8":0,
                    "ch_Water1":0,
                    "ch_Water2":0,
                }
            }
        },
        created() {
            this.getSysConfigData()
            this.deviceData = JSON.parse(sessionStorage.getItem('list_item'))
            this.queryDeviceRunningData()
            this.paramSetTimerInit()

            if(this.deviceData.functions.length>0){
                console.log(this.deviceData.functions[0].typeId)
                this.getDeviceTypeInfo(this.deviceData.functions[0].typeId)
            }

        },
        beforeDestroy() {
            this.paramTimerClear()
        },
        watch: {
            $route(to, from) {
                if (this.$route.path == '/equimentparam') {
                    this.paramSetTimerInit()
                } else {
                    this.paramTimerClear()
                }
            },
            dialogParamVisible:function (val) {
                console.log(123456,val)
                if(val){
                    this.paramTimerClear()
                }else{
                    this.paramSetTimerInit()
                }
            }
        },
        methods: {
            checkedTimeingData(val){
                this.paramTimerClear()
                if(this.checked){
                    this.timerStartTime = new Date().getTime()
                    this.timerLength = this.timerConfig.realRefreshFre*1000
                    this.readRealData()
                }else{
                    this.timerLength = this.timerConfig.autoRefreshFre*1000
                }

                // if(this.checked){
                //     this.timerLength = 1000*60*2
                //     // this.paramSetTimerInit()
                // }else{
                //     this.timerLength = 1000*60*40
                //     // this.paramTimerClear()
                // }
                this.paramSetTimerInit()
            },
            // 检验
            verifications(key) {
                return verification(key)
            },
            paramSetTimerInit() {
                this.paramTimerClear()
                let $_this = this;
                this.paramSetTimer = setInterval(function () {
                    //如果开启实时数据，则实时数据开始十分钟之后自动结束
                    let nowTimeEnd= new Date().getTime()
                    if($_this.checked && nowTimeEnd - $_this.timerStartTime > $_this.timerConfig.realRefreshFre*1000*$_this.timerConfig.realRefreshRunTime){
                        $_this.checked = false
                        $_this.checkedTimeingData()
                        return false;
                    }
                    apiLoading.isShow = false
                    if($_this.checked){
                        $_this.readRealData()
                    }else{
                        $_this.queryDeviceRunningData()
                    }

                }, $_this.timerLength)
            },
            paramTimerClear() {
                clearInterval(this.paramSetTimer);
                this.paramSetTimer = null;
            },
            //获取设备参数
            queryDeviceRunningData() {
                queryDeviceRunningData({
                    deviceCode: this.deviceData.deviceCode,
                    deviceId: this.deviceData.deviceId,
                    "clientId": '' + this.deviceData.deviceCode,
                }).then((res) => {
                    apiLoading.isShow = true
                    this.deviceParam = res
                    const chartsList = res.charts
                    this.deviceParam['charts'] = chartsList.map(item => {
                        const chartItem = {
                            title: item.title,
                            xData: item.x,
                            yData1: item.ys,
                            lengData: item.demos,
                            unit: item.unit
                        }
                        return chartItem
                    })
                })
            },
            showDialog(val) {
                if (val == 5) {
                    this.dialogErrVisible = true
                }
                if (val == 3) {
                    this.dialogHisVisible = true
                }
                if (val == 4) {
                    this.dialogBaseVisible = true
                }
                if (val == 2) {
                    this.queryDeviceConfigParams()
                    this.dialogDistanceVisible = true
                }
                if (val == 1) {
                    this.queryDeviceConfigParams()
                    this.readChannelData()
                    this.dialogParamVisible = true
                }
            },
            submitHisTime() {
                if(!this.histTime){
                    this.$message.error('请选择查询日期')
                    return false
                }
                this.queryDeviceHistoryData()
                this.dialogHisVisible = false

            },
            submitBaseInfo() {
                this.dialogBaseVisible = false
            },
            submitDistance() {
                this.dialogDistanceVisible = false
            },
            formatCheckDis() {
                return this.checkList.includes('自动')
            },
            //点击设置按钮
            clickSettingBtn(group,groupId){
                this.submitCtrlParam(group,groupId)
            },
            changeRadio(obj,group){
                this.submitCtrlParam(group,0)
            },
            //点击修改配置数据
            submitCtrlParam(group,groupId) {
                //把具体的是时，分，秒重新赋值给对应的字段
                const  fn = (str) => {
                    let arr = ['Hour','Min','Sec']
                    arr.map(item => {
                        this.paramCtrolData[str+item] = this.timesToSplitTime(this.paramCtrolData[str],item)
                    })
                    // delete this.paramCtrolData[str]
                }
                fn('Run_Start')
                fn('Run_End')
                fn('IN_Start')
                fn('IN_Convert')
                fn('IN_End')
                fn('OUT1_Start')
                fn('OUT1_End')
                fn('OUT2_Start')
                fn('OUT2_End')
                fn('OUT3_Start')
                fn('OUT3_End')
                fn('OUT4_Start')
                fn('OUT4_End')
                //对比修改的数据字段及值
                // const params = this.getNoEqualObject(this.paramCtrolDataStr,this.paramCtrolData)
                const params = this.paramCtrolData
                //是否勾选的字段列表，
                const checkedKeys = ['Run_TimeParam','IN_TimeParam','OUT_TimeParam','Host_TempParam',
                    'ReIN_TempParam','Back_TempParam','Solar_ConfigParam','Sys_ConfigParam',
                    'TimeWater_ConfigParam','WaterLevel_ConfigParam']
                //数据分组按groupList的数组字段进行分组
                const groupList = group
                // 数据分组
                let gropData = []
                let obj = {}
                console.log('params11111====',groupList,params)
                for(let key in params){
                    if((groupList.includes(key)||key.indexOf(groupList[0]) == 0) && this.paramCtrolDataStr[key]){
                        console.log('params====',key,params[key])
                        obj[key] = params[key]
                    }
                }
                if(Object.keys(obj).length>0){
                    gropData.push(obj)
                }
                // groupList.map(item => {
                //     let obj = {}
                //     for(let key in params){
                //         if((item.includes(key)||key.indexOf(item[0]) == 0) && this.paramCtrolDataStr[key]){
                //             obj[key] = params[key]
                //         }
                //     }
                //     if(Object.keys(obj).length>0){
                //         gropData.push(obj)
                //     }
                // })
                // console.log('gropData===',params,gropData)
                //分组的数据根据是否勾选启用进行进行筛选，勾选之后又取消勾选的则删除分组中的数据
                // let i = gropData.length;
                // while(i--) {
                //     const keys = Object.keys(gropData[i])
                //     const checkedItem = checkedKeys.filter(item => {
                //         if(keys.includes(item)){
                //             return item
                //         }
                //     })
                //     if(checkedItem.length == 0 || !gropData[i][checkedItem] || (gropData[i][checkedItem] &&gropData[i][checkedItem] == 0)){
                //         gropData.splice(i,1)
                //     }
                // }
                // if(gropData.length == 0){
                //     this.$message.error('本次无修改数据')
                //     this.dialogParamVisible = false
                //     return false
                // }
                // if(gropData.length >1){
                //     this.$message.error('每次只可修改一组数据')
                //     return false
                // }
                console.log(123,params,gropData)
                const newParams = Object.assign(gropData[0],{clientId:'' + this.deviceData.deviceCode,groupId:''+ groupId})
                console.log('newParams==',newParams)
                setDeviceConfigParams(
                    newParams
                ).then(res => {
                    if(res.ACK == 'fail'){
                        this.$message.error('设置失败')
                    }else{
                        this.$message.success('设置成功')
                        // this.queryDeviceConfigParams()
                        // this.dialogParamVisible = false
                    }
                })

            },
            //点击控制按钮
            clickBtn(row1, row) {
                console.log(row1,row)
                manualControll({
                    "deviceCode": ''+ this.deviceData.deviceCode,
                    "functionCode": row.functionCode + row1.statusCode,
                    "functionName": row.functionName,
                    "typeId": row.typeId
                }).then(res => {
                    if(res.suc){
                        this.$message.success('操作成功')
                        this.queryDeviceRunningData()
                    }else{
                        this.$message.error('操作失败')
                    }
                })

            },
            readParam(){
                this.flag = 1
                this.queryDeviceConfigParams()
                this.readChannelData()
            },
            readChannelData(){
                readChannelData({
                    clientId: '' + this.deviceData.deviceCode,
                }).then(res=>{
                    if(res){
                        this.chanalConfig = res
                        // this.$message.success('读取成功')
                    }
                })
            },
            setChannelData(){
                setChannelData({
                    clientId: '' + this.deviceData.deviceCode,
                    "Ch_Temp1": this.chanalConfig.ch_Temp1,
                    "Ch_Temp2": this.chanalConfig.ch_Temp2,
                    "Ch_Temp3": this.chanalConfig.ch_Temp3,
                    "Ch_Temp4": this.chanalConfig.ch_Temp4,
                    "Ch_Temp5": this.chanalConfig.ch_Temp5,
                    "Ch_Temp6": this.chanalConfig.ch_Temp6,
                    "Ch_Temp7": this.chanalConfig.ch_Temp7,
                    "Ch_Temp8": this.chanalConfig.ch_Temp8,
                    "Ch_Water1": this.chanalConfig.ch_Water1,
                    "Ch_Water2": this.chanalConfig.ch_Water2,
                    "ch_Temp1": this.chanalConfig.ch_Temp1,
                    "ch_Temp2": this.chanalConfig.ch_Temp2,
                    "ch_Temp3": this.chanalConfig.ch_Temp3,
                    "ch_Temp4": this.chanalConfig.ch_Temp4,
                    "ch_Temp5": this.chanalConfig.ch_Temp5,
                    "ch_Temp6": this.chanalConfig.ch_Temp6,
                    "ch_Temp7": this.chanalConfig.ch_Temp7,
                    "ch_Temp8": this.chanalConfig.ch_Temp8,
                    "ch_Water1": this.chanalConfig.ch_Water1,
                    "ch_Water2": this.chanalConfig.ch_Water2,
                }).then(res=>{
                    if(res.ACK.suc){
                        this.$message.success('设置成功')
                    }
                })
            },
            //获取配置参数
            queryDeviceConfigParams() {
                queryDeviceConfigParams({
                    clientId: '' + this.deviceData.deviceCode,
                    flag:this.flag
                }).then((res) => {
                    if(this.flag == 1 && res){
                        this.$message.success('读取成功')
                    }
                    this.flag = 0
                    this.paramCtrolDataStr = JSON.parse(JSON.stringify(res))
                    this.paramCtrolData = res

                    const  fn = (str) => {
                        let arr = ['Hour','Min','Sec']
                        this.$set(this.paramCtrolData, str, this.formatTimes(res[str + arr[0]], res[str + arr[1]], res[str + arr[2]]))
                    }
                    fn('Run_Start')
                    fn('Run_End')
                    fn('IN_Start')
                    fn('IN_Convert')
                    fn('IN_End')
                    fn('OUT1_Start')
                    fn('OUT1_End')
                    fn('OUT2_Start')
                    fn('OUT2_End')
                    fn('OUT3_Start')
                    fn('OUT3_End')
                    fn('OUT4_Start')
                    fn('OUT4_End')
                    console.log('-=-=',this.paramCtrolData)
                    this.$forceUpdate()
                })
            },
            //把具体的时，分，秒转化为标准时间
            formatTimes(s, f, m) {
                let ts = s, tf = f, tm = m
                // if (s <= 9) {
                //     ts = '0' + s
                // }
                // if (f <= 9) {
                //     tf = '0' + s
                // }
                // if (m <= 9) {
                //     tm = '0' + s
                // }
                return new Date(2022, 9, 10, ts, tf, tm)
            },
            //获取日期时间的具体时，分，秒
            timesToSplitTime(times,time){
                if(time == 'Hour'){
                    return times == 0 ? times : times.getHours()
                }
                if(time == 'Min'){
                    return times == 0 ? times : times.getMinutes()
                }
                if(time == 'Sec'){
                    return times == 0 ? times : times.getSeconds()
                }
            },
            //对比参数是否改变，如果改变了需要获取到改变的key和value
            getNoEqualObject(obj1,obj2){//obj1源数据，obj2比较对象
                let newObj = {}
                for(let key in obj2){
                    if(obj1[key]!=obj2[key]){
                        newObj[key] = obj2[key]
                    }
                }
                return newObj
            },
            //点击查询按钮
            searchErrList(){
                if(!this.errTime){
                    this.$message.error('请选择查询日期')
                    return false
                }
                this.queryDeviceWarningData()
                this.dialogErrListVisible = true
                this.dialogErrVisible = false
            },
            //获取历史数据并导出
            queryDeviceHistoryData(){
                queryDeviceHistoryData({
                    "clientId": '' + this.deviceData.deviceCode,
                    "endTime": this.histTime[1],
                    "startTime": this.histTime[0]
                }).then(res => {
                    this.gridData = res
                    if(this.gridData.length>0){
                        this.$message.success('正在导出数据，请稍等')
                        setTimeout(()=>{
                            exportTable('#exportTab', 'IMEI号'+this.deviceData.deviceCode+'时间'+this.histTime[0] + '-'+this.histTime[1]+'的历史数据')
                        },1000)
                    }else{
                        this.$message.error('暂无数据')
                    }
                })
            },
            histHeader(row, column, cellValue, index){
                return row.dataName + row.dataValue + row.unit
            },
            //格式化时间戳为年月日时分秒
            formatTime(row, column, cellValue){
                return famatDatesTimes(cellValue);
            },
            //获取故障信息
            queryDeviceWarningData(){
                queryDeviceWarningData({
                    "clientId": '' + this.deviceData.deviceCode,
                    "endTime": this.errTime[1],
                    "startTime": this.errTime[0]
                }).then(res => {
                    this.errData = res
                })
            },
            //获取设备类型的信息
            getDeviceTypeInfo(tId){
                getDeviceTypeInfo({
                    typeId:tId
                }).then((res)=>{
                    console.log(res)
                    this.deviceTypeList = res.expandData
                })
            },
            formatStauts(val){
               let stautsItem =  this.deviceTypeList.deviceStatusList.find(item => val == item.statusCode)
                return stautsItem && stautsItem.statusName ?stautsItem.statusName : ''
            },
            inputTimeLimit(val){
                if(val>1440){
                    this.$message.error('输入的时间过长')
                }
            },
            setDeviceTime(){
                setDeviceTime({
                    "clientId": '' + this.deviceData.deviceCode,
                }).then(res=>{
                    if(res.suc){
                        this.$message.success(res.message)
                        this.deviceTime = res.time
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            readDeviceTime(){
                readDeviceTime({
                    "clientId": '' + this.deviceData.deviceCode,
                }).then(res=>{
                    if(res.suc){
                        this.$message.success(res.message)
                        this.deviceTime = res.time
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            readRealData(){
                readRealData({
                    "clientId": '' + this.deviceData.deviceCode
                }).then(res => {
                   this.queryDeviceRunningData()
                })
            },
            getSysConfigData(){
                getSysConfigData().then(res => {
                    res.map(item => {
                        this.timerConfig[item.name] = item.value

                    })
                    console.log(this.timerConfig)
                })
            }
        }
    }
</script>

<style>
    .equiment-base {
        margin: 15px 0;
    }
    .equiment-base span, .equiment-base div {
        margin-right: 30px;
        line-height: 30px;
    }
    .equiment-base div {
        display: inline-block;
    }
    .chart-container {
        position: relative;
        width: 100%;
        height: 300px;
    }
    .ctrl-param .el-form-item {
        margin-bottom: 5px;
    }
    .ctrl-param .el-form-item__label {
        padding: 0 0 0px;
        line-height: normal;
    }
    .ctrl-param .item-two {
        width: 150px;
        margin-right: 10px;
    }
    .ctrl-param .item-three {
        width: 96.667px;
        margin-right: 10px;
    }
    .ctrl-param .item-one {
        width: 310px;
        margin-right: 10px;
    }
    .ctrl-param .el-select{
        width: 80px;
    }
    .button-style {
        /*padding: 0 10px;*/
        /*margin-right: 15px;*/
        /*background-color: #852b99;*/
        /*color: #fff;*/
        font-size: 12px;
        /*margin-bottom: 20px;*/
        margin: 0 15px 20px 0 !important;
    }
    .button-style span {
        margin: 0;
    }
    .btn-set{
        margin-left: 15px;
    }
    .demo-form-inline{
        padding-left: 15px;
    }
    .params-span{
        width: 150px;
        display: inline-block;
    }
    .params-label{
        vertical-align: middle;
    }
</style>
